<!DOCTYPE html>
<html>

<head>
	<title>Bilibili autumn header</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="author" content="Mr.Liao">
	<style>
		body {
			margin: 0;
		}

		header {
			height: 160px;
			position: relative;
			overflow: hidden;
		}

		header>div {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			--offset: 0px;
			--blur: 2px;
		}

		header>div>img {
			width: 110%;
			height: 100%;
			object-fit: cover;

			transform: translateX(var(--offset));
			filter: blur(var(--blur));
		}
	</style>
</head>

<body>
	<header>
		<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-1.png"></div>
		<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-2.png"></div>
		<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-3.png"></div>
		<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-4.png"></div>
		<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-5.png"></div>
		<div><img src="https://assets.codepen.io/2002878/bilibili-autumn-6.png"></div>
		<!-- https://i0.hdslb.com/bfs/vc/173eafe211b4671e5aff059a1834f3e4579c7a5d.png -->
	</header>
	<script>
		const imgs = document.querySelectorAll('header > div > img');

		document.querySelector('header').addEventListener('mousemove', (e) => {
			var percentage = e.clientX / window.outerWidth;
			var offset = 10 * percentage;
			let blur = 20;


			//当鼠标在最左边时，要求img0到img5的模糊度依次增加，
			//当鼠标在中间时，要求img0到img5的模糊度呈现下箭头形式
			//当鼠标在最右边时，要求img0到img5的模糊度依次减小

			//综上所述，可以使用index/imgs.length作为基础，当不同percentage的时候获取不同的模糊度
			//因为模糊度不能为负，所以需要使用绝对值，当然这里使用的是使用平方使其变正，再乘一个系数即可获取最终模糊度，通过setProperty控制CSS中的自定义变量
			for (let [index, img] of imgs.entries()) {
				let blurValue = (Math.pow((index / imgs.length - percentage), 2) * 20);

				img.style.setProperty('--offset', `${offset}px`);
				img.style.setProperty('--blur', `${blurValue}px`);
			}
		})


		setInterval(() => {
			imgs[1].src = "https://i0.hdslb.com/bfs/vc/173eafe211b4671e5aff059a1834f3e4579c7a5d.png";
			setTimeout(() => {
				imgs[1].src = "https://assets.codepen.io/2002878/bilibili-autumn-2.png";
			}, 200)
		}, 3000);

	</script>
</body>

</html>